<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-menu-item index="1" @click="personalMsg">
      <i class="el-icon-edit-outline"></i>
      <span slot="title">修改个人信息</span>
    </el-menu-item>
    <el-menu-item index="2" @click="dataSourceMsg" v-if="showDataSourceMsg">
      <i class="el-icon-s-tools"></i>
      <span slot="title">数据源管理</span>
    </el-menu-item>
    <el-menu-item index="3" @click="userMsg" v-if="showUserMsg">
      <i class="el-icon-s-tools"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {

  data() {
    return {
      user: "",
      showUserMsg: true,
      showDataSourceMsg:true,
      roleId:'1',
    };
  },
  watch:{
     "$store.state.user":{
      handler(val){
        this.user = val;
        this.roleId = val.role.roleId;
      },
      deep:true,
    },
    roleId:{
      handler(val){
        if(val != '1'){
          this.showUserMsg = false;
        }else{
          this.showUserMsg = true;
        }
        if(val != '0'){
          this.showDataSourceMsg = true;
        }else{
          this.showDataSourceMsg = false;
        }
      }
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    userMsg() {
      this.$router.replace({
        path: "/userManage/usersMsg",
        // params: { userId: this.user.userId },
      });
      this.$emit("changeTitle", "用户管理");
    },
    personalMsg() {
      this.$router.replace({ path: "/userManage/personalMsg" });
      this.$emit("changeTitle", "修改个人信息");
    },
    dataSourceMsg(){
       this.$router.replace({ path: "/userManage/dataSourceMsg" });
      this.$emit("changeTitle", "数据源信息");
    },
     getUserInfo() {
      let ts = this;
      ts.$http({
        method: "GET",
        url: ts.portInterface.getUserInfo,
        params: {
          userId:  localStorage.getItem('userId'),
        },
      })
        .then((response) => {
          if (response.data.code == 200) {
            this.$store.commit("setUserInfo", response.data.result);
            this.user = response.data.result;
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.el-row {
  height: 100%;
  .el-col {
    height: 100%;
  }
}
.el-menu {
  height: 100%;
}
</style>